<template>
  <div class="msg-box">
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      @selection-change="handleSelectionChange"
      stripe
      style="width: 100%; margin-top: 2vh;height: 94vh;"
      border
      max-height="94vh"
      empty-text="暂无消息"
    >
      <el-table-column
        type="index"
        width="55"
        align="center"
      />
      <el-table-column
        label="消息类型"
        width="120"
        align="center"
      >
        系统消息
      </el-table-column>
      <el-table-column
        property="name"
        label="发件人"
        width="120"
        align="center"
      >
        系统
      </el-table-column>
      <el-table-column
        prop="content"
        label="消息内容"
        align="center"
      />
      <el-table-column
        label="发送时间"
        width="120"
        align="center"
      >
        <template #default="{row}">
          {{computeDate(row.created_at)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="消息状态"
        width="100"
        align="center"
      >
        <template #default="{row}">
          <div  v-if="row.status === 0">
            <el-tag type="info">未读</el-tag>
          </div>
          <div v-else>
            <el-tag  type="success">已读</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="250"
      >
        <template #default="{row}">
          <el-button
            @click="toTarget(row.type,row.id)"
            size="small"
          >
            前往
          </el-button>
          <!--<el-button-->
          <!--  type="success"-->
          <!--  @click="readMSG(row.id)"-->
          <!--  size="small"-->
          <!--  :disabled=row.status-->
          <!--&gt;-->
          <!--  已读-->
          <!--</el-button>-->
          <el-button
            type="danger"
            @click="delMSG(row.id)"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <DetailDialog ref="detail"/>
</template>

<script setup>
import {ElMessage, ElTable, ElTableColumn, ElTag} from "element-plus"
import {onMounted, reactive, ref, defineEmits} from "vue"
import {delMsg, getMSGList, readFlow, upTopCurrentMessage} from "@/api/index.js"
import {computeDate, createMsg} from "@/lib/utils.js"
import DetailDialog from "@/components/Message/detailDialog.vue"
import emitter from "@/lib/eventBus.js"
import {useRoute, useRouter} from "vue-router"

const detail = ref()

const hasReaded = ref(false)

let user = reactive()

const route = useRoute()
const router = useRouter()
const emit = defineEmits(['toggleDiaShow'])

const tableData = ref([])
let approve_info = reactive({})
const dialogVisible = ref(false)

emitter.emit('updateManageMenu','/manage')

onMounted(()=>{
  getUser()
  if(route.query.id){
    getTopMessageList(route.query.id)
  } else {
    getMsgList()
  }
})

const getUser = () => {
  user = JSON.parse(localStorage.getItem('syhyDocManSys'))
}

const getMsgList = async () => {
  try {
    const {data:res} = await getMSGList({
      userId:user.id
    })
    console.log(res,'index')
    if (res.code === 200){
      tableData.value = res.data
      emitter.emit('point',user.id)
    } else {
      tableData.value = []
    }
  } catch (e) {
    console.log(e)
  }
}

const handleSelectionChange = (id) => {

}
const readMSG = async (id) => {
  try {
    const {data:res} = await readFlow({
      noticeId:id
    })
    if (res.code === 200) {
      emitter.emit('reloadBadge',user.id)
      await getMsgList()
    } else {
    }
  } catch (e) {
    console.log(e)
  }
}
const delMSG = async (id) => {
  try {
    const {data:res} = await delMsg({
      msgId:id
    })
    if (res.code === 200){
      getMsgList()
      return ElMessage({
        message:'操作成功!',
        type:'success'
      })
    } else {
      return ElMessage({
        message:'操作失败!',
        type:'warning'
      })
    }
  } catch (e) {
    console.log(e)
  }
}

const toTarget = (type,id) => {
  try {
    if (type === 0){
      router.push('/app-mine')
      readMSG(id)
    } else if (type === 3) {
      router.push('/borrow-mine')
      readMSG(id)
    }
  } catch (e) {
    console.log(e)
  }
}

const getTopMessageList = async (id) => {
  try {
    tableData.value = []
    const {data:res} = await upTopCurrentMessage({
      msgId:id,
      userId:user.id
    })
    if (res.code === 200){
      tableData.value = res.data
    } else if (res.code === 201) {
      await getMsgList()
      return createMsg('未找到该消息','info',true)
    } else {
      tableData.value = []
      return ElMessage({
        message:'获取消息失败',
        type:'warning'
      })
    }
  } catch (e) {
    console.log(e)
  }
}
</script>

<style scoped lang="less">
.msg-box{
  height: 98%;
  width: 89%;
  border: 1px solid lightgray;
  background-color: #fafafa;
  border-radius: 10px;
  margin-top: 1vh;
  margin-left: 9vw;
  box-shadow: 0 0 10px 5px lightgray;
  padding: 0 1vh;
}
</style>
